/*
前端性能优化汇总
  骨架屏技术，可以减少页面白屏等待时间
    + 前端骨架屏「在没有加载出来数据之前，用灰色的框框(或者Loading效果)占位」
    + 服务器骨架屏「页面首屏信息是由服务器渲染的 SSR」

  加快页面第一次渲染的速度
  @1 减少HTTP请求的数量和大小
    原因：HTTP并发数量有限制(5~7个)；如果请求过多，可能会导致网络通道阻塞！
    + 图片（或者音视频）懒加载 
    + 使用雪碧图
    + 数据异步(分批/延迟)加载
    + 减少冗余代码(对公共代码进行封装)
    + 使用webp格式的图片(因为比普通图片小一点)
    + 使用字体图标或者SVG图片(一方面可以减少图片请求次数、一方面渲染也更快、也不容易失帧、矢量图体积更小)
    + CSS/JS等资源合并压缩(各自合并为一个最好 webpack)
    + 服务器端开启Gzip压缩(压缩率在60%左右)
    + 对于某些图片，开启BASE64，要合理使用「小图可以做BASE64(基于webpack管理)、需要优先加载的大图也可以BASE64」，但是BASE64不要滥用，因为会加大代码量！
  @2 减少CSS选择器层级嵌套：加快CSSOM TREE的构建
  @3 静态资源文件采用强缓存和协商缓存，让页面第二次及以后访问更快
  @4 样式代码较少的情况下使用内嵌式，如果需要使用外链式，则把<link>放在页面头部，避免使用导入式(@import会阻碍GUI的渲染)！！
  @5 基于LocalStorage对不经常更新的数据做数据缓存！
  @6 合理存储cookie，因为每一次向服务器发送请求，都会把cookie传递给服务器，如果cookie内容过多，会让请求变的更慢！！
  @7 开启Connection:Keep-Alive，避免每一次请求都需要重新“TCP三握四挥”
  @8 DNS预解析 dns-prefetch「把页面渲染和DNS解析同时进行，这样速度会快一些」
  @9 <script>标签放在页面的末尾，或者开启async/defer异步加载
  @10 “烧钱”的优化方案：静态资源文件开启CDN加速 
  @11 使用HTTP/2.0版本（现在大部分使用的都是HTTP/1.1）

  提高运行时速度
  @1 合理使用闭包(合理开辟内存)
  @2 函数的防抖和节流
  @3 减少DOM的重排(回流)
    + 样式读写分离
    + 批量新增元素：字符串拼接、createDocumentFragment
    + 使用transform\opacity等操作样式
    + 对于需要运动的元素，尽可能提取到单独的文档流中
    + 基于vue/react操作，避免直接操作DOM
    + ...
  @4 避免出现死递归、死循环，防止内存泄漏
  @5 使用事件委托：减少内存的消耗、可以给动态增加的元素做事件绑定、部分需求必须基于事件委托完成...
  @6 requestAnimationFrame动画代替setTimeout
  @7 避免重复的“成员访问”（可以解构赋值或者用变量把值存储起来）
  @8 避免使用for/in循环（这个循环既浪费性能，又不好用）
  @9 避免使用Table或Iframe标签
  @10 避免使用CSS表达式
  @11 避免使用JS中的with/eval语句
 */